import React, {JSX} from 'react';
import {View, StyleSheet} from 'react-native';
import {BasicText} from '../../../kit/text';
import {useHomeScreenContext} from '../';
import {OpenToRightIcon} from '../../../kit/icon';
import {Horizontal as DramaProductHorizontal} from '../../../kit/dramaProduct';
import { normalize } from '../../../utils/adapter';

type Props = {};

function RecentViewing({}: Props): JSX.Element {
  const homeCtx = useHomeScreenContext();

  return (
    <View style={styles.container}>
      <View style={styles.title_row}>
        <BasicText color="#333333">最近观看</BasicText>
        <View style={styles.more_view}>
          <BasicText color="#999999" fontSize={12}>
            查看更多
          </BasicText>
          <OpenToRightIcon size="12" />
        </View>
      </View>
      <View style={styles.near_term_drama}>
        {homeCtx?.state.recentViewings.map(state => (
          <DramaProductHorizontal {...state} key={state.id} />
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    paddingHorizontal: normalize(10),
    marginTop: normalize(20),
  },
  title_row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  more_view: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  near_term_drama: {
    flexDirection: 'row',
    paddingHorizontal: normalize(10),
    marginTop: normalize(16),
    justifyContent:'space-between',
    gap:normalize(10),
  },
});

export default RecentViewing;
